<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-card>
                    <!-- 标题 -->
                    <div slot="header">
                        <span>新闻分类列表</span>
                    </div>
                    <!-- inline表示单行表单 -->
                    <el-form :inline="true" :model="searchForm">
                        <el-form-item label="分类名称">
                            <el-input v-model="searchForm.typeName" placeholder="请输入新闻分类名称"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="doSearch()">搜索</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
        <!-- 表格和分页部分 -->
        <el-row class="mt-10">
            <el-col :span="24">
                <el-card>
                    <el-row>
                        <el-col :span="24">
                            <!-- 新增按钮 -->
                            <el-button type="success" @click="handleAdd()">新增</el-button>
                        </el-col>
                    </el-row>
                    <!-- 表格部分 -->
                    <!-- 定义表格，data绑定的是列表数据，border表示有边框 -->
                    <!-- selection-change事件表示用户勾选的状态改变 -->
                    <el-table :data="pageData.data" border class="mt-10" @selection-change="handleSelectionChange">
                        <!-- 定义表格列，type表示列类型，selection表示多选框 -->
                        <el-table-column type="selection" width="55"></el-table-column>
                        <!-- 定义表格列，prop对应列内容的字段名，label表示表头名称，width可以控制宽度 -->
                        <el-table-column prop="id" label="编号" width="100"></el-table-column>
                        <el-table-column prop="typeName" label="分类名称" width="180"></el-table-column>
                        <el-table-column prop="remark" label="分类描述"></el-table-column>
                        <el-table-column label="操作" width="300">
                            <template #default="scope">
                                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button size="mini" type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 完整功能的分页 -->
                    <!-- size-change事件表示用户修改了每页显示的数量 -->
                    <!-- current-change事件表示用户改变了当前页码 -->
                    <!-- page-sizes数组表示可下拉选择的每页显示数量 -->
                    <el-pagination class="mt-10" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="pageData.pageNo" :page-sizes="[5, 10, 20, 50, 100]"
                        :page-size="pageData.pageSize" layout="total, sizes, prev, pager, next, jumper"
                        :total="pageData.totalCount">
                    </el-pagination>
                </el-card>
            </el-col>
        </el-row>

        <!--  新闻分类对话框，标题根据id是否为null来决定是显示新增还是编辑 -->
        <el-dialog :title="(saveForm.id == null ? '新增' : '编辑') + '新闻分类'" v-model:visible="saveDialogVisible">
            <!-- 表单数据绑定到saveForm对象 -->
            <el-form :model="saveForm" ref="saveFormRef" :rules="rules">
                <!-- 分类ID不显示，修改才需要分类ID -->
                <el-form-item label="分类ID" label-width="120px" v-show="false">
                    <!-- ID设置为隐藏域 -->
                    <el-input type="hidden" v-model="saveForm.id" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="分类名称" label-width="120px" prop="typeName">
                    <el-input v-model="saveForm.typeName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="分类描述" label-width="120px" prop="remark">
                    <el-input v-model="saveForm.remark" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="saveDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="doSave()">保 存</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
// 引入新闻类型API
import { getNewsTypeList, getNewsTypeDetail, saveNewsType, deleteNewsType } from '@/api/newsType'

// 定义组件名称
defineOptions({
    name: 'NewsTypeList'
})

// 查询条件
const searchForm = reactive({
    typeName: '',
    pageNo: 1,
    pageSize: 5
})

// 分页数据
const pageData = reactive({
    data: [],
    pageNo: 1,
    pageSize: 10,
    totalCount: 0,
    totalPageCount: 1
})

// 弹窗表单显示
const saveDialogVisible = ref(false)

// 弹窗表单数据
const saveForm = reactive({
    id: null,
    typeName: '',
    remark: ''
})

// 表单校验规则
const rules = {
    typeName: [
        { required: true, message: '分类名称不能为空', trigger: 'blur' }
    ]
}

// 多选
const multipleSelection = ref([])

// 表单引用
const saveFormRef = ref(null)

// 加载新闻类型分页列表
const loadList = () => {
    getNewsTypeList({
        typeName: searchForm.typeName,
        pageNo: searchForm.pageNo,
        pageSize: searchForm.pageSize
    }).then(res => {
        if (res.code === 0) {
            Object.assign(pageData, res.data)
        } else {
            ElMessage.error(res.msg)
        }
    })
}

// 搜索
const doSearch = () => {
    searchForm.pageNo = 1
    loadList()
}

// 分页
const handleSizeChange = (size) => {
    searchForm.pageSize = size
    loadList()
}

const handleCurrentChange = (page) => {
    searchForm.pageNo = page
    loadList()
}

// 新增
const handleAdd = () => {
    Object.assign(saveForm, { id: null, typeName: '', remark: '' })
    saveDialogVisible.value = true
}

// 编辑
const handleEdit = (index, row) => {
    getNewsTypeDetail(row.id).then(res => {
        if (res.code === 0) {
            Object.assign(saveForm, res.data)
            saveDialogVisible.value = true
        } else {
            ElMessage.error(res.msg)
        }
    })
}

// 删除
const handleDelete = (index, row) => {
    ElMessageBox.confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        deleteNewsType(row.id).then(res => {
            if (res.code === 0) {
                ElMessage.success('删除成功')
                loadList()
            } else {
                ElMessage.error(res.msg)
            }
        })
    })
}

// 保存
const doSave = () => {
    saveFormRef.value.validate(valid => {
        if (!valid) return
        saveNewsType(saveForm).then(res => {
            if (res.code === 0) {
                ElMessage.success('保存成功')
                saveDialogVisible.value = false
                loadList()
            } else {
                ElMessage.error(res.msg)
            }
        })
    })
}

// 多选
const handleSelectionChange = (val) => {
    multipleSelection.value = val
}

// 组件挂载时加载数据
onMounted(() => {
    loadList()
})
</script>
<style>
.mt-10 {
    margin-top: 10px;
}
</style>
